<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>混合模式</title>
    <style>
      * {
        margin: 0;
      }
      .content,
      .wrapper:before {
        box-sizing: border-box;
        display: block;
        font-size: 4em;
        padding: 1em;
        width: 6em;
        height: 3em;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
      }
      .content {
        font-weight: bold;
        text-align: center;
        z-index: 1000;
        background: #fff;
        color: #000;
        mix-blend-mode: lighten;
        padding: 0.6rem;
      }
      section {
        background-repeat: no-repeat;
        background-size: cover;
        isolation: isolate;
        position: relative;
        height: 100vh;
        padding: 1em;
      }
      .wrapper {
        clip: rect(auto auto auto auto);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      .wrapper:before {
        content: " ";
        padding: 2em 3.5em;
        mix-blend-mode: darken;
      }
      .one {
        background-image: url(https://source.unsplash.com/1920x1080?city);
      }
      .one .wrapper:before {
        background: #bb3720;
      }
      .two {
        background-image: url(https://source.unsplash.com/1920x1080?landscape);
      }
      .two .wrapper:before {
        background: #faaa54;
        mix-blend-mode: difference;
      }
      .three {
        background-image: url(https://source.unsplash.com/1920x1080?portrait);
      }
      .three .wrapper:before {
        background: #6c320a;
        mix-blend-mode: screen;
      }
      .four {
        background-image: url(https://source.unsplash.com/1920x1080?stars);
      }
      .four .wrapper:before {
        background: #e4135d;
      }
    </style>
</head>
<body>
  <div class="content">
    混合模式：颜色减淡
  </div>

  <section class="one">
    <div class="wrapper"></div>
  </section>

  <section class="two">
    <div class="wrapper"></div>
  </section>

  <section class="three">
    <div class="wrapper"></div>
  </section>

  <section class="four">
    <div class="wrapper"></div>
  </section>
</body>
</html>
<!--简单实现原理：-->
<!--首先我们只需要加一个 h1 标题标签-->
<!--然后我们给h1标签加入mix-blend-mode中的颜色减弱模式color-dodge，但是要注意的是我们需要给body和html加入背景颜色background: white，要不你会发现这个效果会无效。因为h1我们没有给颜色，会自动往上级继承，并且混合模式是针对背景颜色的过滤，所以 body 和 html 需要有背景颜色才行。-->
